<script lang="ts">
    import Icon from "../Common/Icons/Icon.svelte";

    const props = $props();
</script>

<ul class="cm-upload-list cm-upload-picture-list">
    {#each props.files as file (file.uid)}
        <!-- svelte-ignore a11y_no_static_element_interactions -->
        <li class="cm-upload-picture-card">
            <img class="cm-upload-picture-img" src={file.url} alt="" />
            <!-- svelte-ignore a11y_click_events_have_key_events -->
            <div
                class="cm-upload-picture-remove"
                onclick={() => {
                    props.onRemove?.(file);
                }}
            >
                <Icon icon="times" />
            </div>
            <!-- svelte-ignore a11y_click_events_have_key_events -->
            <div
                class="cm-upload-picture-preview"
                onclick={() => {
                    props.onPreview?.(file);
                }}
            >
                <Icon icon="eye" size={20} />
            </div>
        </li>
    {/each}
    <!-- svelte-ignore a11y_click_events_have_key_events -->
    <!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
    <li class="cm-upload-picture-add" onclick={props.onClick}>
        {@render props.children?.()}
    </li>
</ul>
